<template>
  <div>
  <div style="text-align:left;">
      <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="题目名称">
            <el-input placeholder="请输入题目名称" v-model="rubName" clearable></el-input>
          </el-form-item>
          <el-form-item label="题目类型">
          <el-select v-model="rubType" placeholder="请选择题目类型" style="width:300px">
            <el-option :label="item.name" :value="item.value" v-for="item in rubTypes" :key="item.value"></el-option>
          </el-select>
          </el-form-item>
          <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
              <el-button type="success" icon="el-icon-brush" @click="clearCondition">清空条件</el-button>
          </el-form-item>
          <el-button type="primary" round style="float: right" @click="dialogFormVisible = true"><i class="el-icon-circle-plus-outline"></i> 添加题目</el-button>
      </el-form>
    </div>
    <el-table :data="tableData" border style="width: 100%">
        <el-table-column fixed prop="rubId" label="题目编号" width="100"></el-table-column>
        <el-table-column prop="rubName" label="题目名称" width="330"></el-table-column>
        <el-table-column prop="rubType" label="题目类型" width="150" :formatter="formatterType"></el-table-column>
        <el-table-column prop="rubGender" label="适用性别" width="150"></el-table-column>
        <el-table-column prop="rubCreateTime" label="建题时间" width="230"></el-table-column>
        <el-table-column prop="rubState" label="题目状态" width="120" :formatter="formatState"></el-table-column>
        <el-table-column fixed="right" label="操作" width="230" fit='true'>
            <template slot-scope="scope">
                <el-button type="text" @click="watchRub(scope.row)"><i class="el-icon-zoom-in"></i>查看题目</el-button>
                <el-button type="text" @click="editRub(scope.row)"><i class="el-icon-edit"></i>编辑</el-button>
                <el-button type="text" @click="delRub(scope.row.rubId)"><i class="el-icon-delete"></i>删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[3, 5, 9, 15]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>

    <el-dialog title="新增题目" :visible.sync="dialogFormVisible">
      <el-form label-position="right" :rules="rules" ref="ruleForm" label-width="80px" :model="addRub">
        <el-form-item label="名称" prop="rubName">
          <el-input v-model="addRub.rubName"></el-input>
        </el-form-item>
        <el-form-item label="健康建议" style="margin-top: 23px;">
          <el-input type="textarea" v-model="propoContent"></el-input>
        </el-form-item>
       <el-form-item style="margin-top: 23px;text-align:left" label="题目类型" prop="rubType">
          <el-select v-model="addRub.rubType" placeholder="请选择">
            <el-option :label="item.name" :value="item.value" v-for="item in rubTypes" :key="item.value"></el-option>
          </el-select>
       </el-form-item>
       <el-form-item style="margin-top: 23px;text-align:left" label="适用性别">
          <el-select v-model="addRub.rubGender" placeholder="请选择">
            <el-option label="不限性别" value="不限性别"></el-option>
            <el-option label="男性" value="男性"></el-option>
            <el-option label="女性" value="女性"></el-option>
          </el-select>
       </el-form-item>
       <el-form-item style="margin-top: 23px;text-align:left" label="选项个数">
          <el-select v-model="count">
            <el-option label="2" value="2"></el-option>
            <el-option label="3" value="3"></el-option>
            <el-option label="4" value="4"></el-option>
            <el-option label="5" value="5"></el-option>
          </el-select>
       </el-form-item>
       <el-form-item label="选项名称" v-for="(item,index) of rubricOptions" :key="index" v-show="index < count" style="text-align:left">
          <el-input v-model="item.rubOpName" style="width:221px"></el-input>
          <span>选项分数：</span>
          <el-rate
            v-model="item.rubOpScore"
            show-text
            :texts="['1分', '2分', '3分', '4分', '5分']" style="display:inline">
          </el-rate>
       </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitAdd">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="修改题目" :visible.sync="dialogFormVisibleUp" :before-close="handleClose">
      <el-form label-position="right" :rules="rules" ref="ruleFormUp" label-width="80px" :model="upRub">
        <el-form-item label="名称" prop="rubName">
          <el-input v-model="upRub.rubName"></el-input>
        </el-form-item>
        <el-form-item label="健康建议" style="margin-top: 23px;">
          <el-input type="textarea" v-model="upRub.propose.propoContent"></el-input>
        </el-form-item>
       <el-form-item style="margin-top: 23px;text-align:left" label="题目类型" prop="rubType">
          <el-select v-model="upRub.rubType" placeholder="请选择">
            <el-option :label="item.name" :value="item.value" v-for="item in rubTypes" :key="item.value"></el-option>
          </el-select>
       </el-form-item>
       <el-form-item style="margin-top: 23px;text-align:left" label="适用性别">
          <el-select v-model="upRub.rubGender" placeholder="请选择">
            <el-option label="不限性别" value="不限性别"></el-option>
            <el-option label="男性" value="男性"></el-option>
            <el-option label="女性" value="女性"></el-option>
          </el-select>
       </el-form-item>
       <el-form-item style="margin-top: 23px;text-align:left" label="选项个数">
          <el-select v-model="count">
            <el-option label="2" value="2"></el-option>
            <el-option label="3" value="3"></el-option>
            <el-option label="4" value="4"></el-option>
            <el-option label="5" value="5"></el-option>
          </el-select>
       </el-form-item>
       <el-form-item label="选项名称" v-for="(item,index) of rubricOptions" :key="index" v-show="index < count" style="text-align:left">
          <el-input v-model="item.rubOpName" style="width:221px"></el-input>
          <span>选项分数：</span>
          <el-rate
            v-model="item.rubOpScore"
            show-text
            :texts="['1分', '2分', '3分', '4分', '5分']" style="display:inline">
          </el-rate>
       </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitUp">确认修改</el-button>
      </div>
    </el-dialog>

    <el-dialog title="查看题目" :visible.sync="dialogFormVisible1">
      <div>
        <h1>{{rub.rubName}}</h1>
        <div style="margin-top: 20px">
          <h3 v-for="(item, index) in options" :key="item.rubOpId">{{index+1 + '、' +item.rubOpName}} <el-tag type="success">{{item.rubOpScore}}分</el-tag></h3>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'Rubric',
  data () {
    return {
      tableData: [],
      total: 0,
      currentPage: 1,
      pageSize: 5,
      rubName: '',
      rubType: '',
      rub: {},
      options: [],
      dialogFormVisible: false,
      dialogFormVisible1: false,
      formLabelWidth: '120px',
      addRub: {propose: {}},
      propoContent: '',
      count: 0,
      upRub: {propose: {}},
      dialogFormVisibleUp: false,
      rubricOptions: [{rubOpName: '', rubOpScore: 0}, {rubOpName: '', rubOpScore: 0}, {rubOpName: '', rubOpScore: 0}, {rubOpName: '', rubOpScore: 0}, {rubOpName: '', rubOpScore: 0}],
      rubTypes: [
        {name: '平和质', value: 1},
        {name: '气虚质', value: 2},
        {name: '阳虚质', value: 3},
        {name: '阴虚质', value: 4},
        {name: '痰湿质', value: 5},
        {name: '湿热质', value: 6},
        {name: '血瘀质', value: 7},
        {name: '气郁质', value: 8},
        {name: '特禀质', value: 9},
        {name: '躯体化', value: 10},
        {name: '强迫症化', value: 11},
        {name: '人际关系敏感', value: 12},
        {name: '犹豫', value: 13},
        {name: '焦虑', value: 14},
        {name: '敌对', value: 15},
        {name: '恐怖', value: 16},
        {name: '偏执', value: 17},
        {name: '精神病性', value: 18},
        {name: '膳食情况', value: 19},
        {name: '体力活动', value: 20},
        {name: '吸烟情况', value: 21}
      ],
      rules: {
        rubName: [
          { required: true, message: '请输入题目名称', trigger: 'blur' }
        ],
        rubType: [
          { required: true, message: '请选择题目类型', trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    // 加载题库的方法
    initRub () {
      this.$axios.post(`/api/DHRubricController/initRub?pageNum=${this.currentPage}&pageSize=${this.pageSize}&rubName=${this.rubName}&rubType=${this.rubType}`).then(({data}) => {
        this.tableData = data.rows
        this.total = data.total
      })
    },
    // 格式化类型
    formatterType (row, column, cellValue, index) {
      for (let i = 0; i < this.rubTypes.length; i++) {
        if (this.rubTypes[i]['value'] === row.rubType) {
          return this.rubTypes[i].name
        }
      }
      return '未知'
    },
    // 格式化状态
    formatState (row, column, cellValue, index) {
      return row.rubState === 0 ? '正常' : row.rubState === 1 ? '禁用' : '未知'
    },
    // 改变页大小
    handleSizeChange (value) {
      this.pageSize = value
      this.initRub()
    },
    // 改变当前页码
    handleCurrentChange (value) {
      this.currentPage = value
      this.initRub()
    },
    // 查询按钮
    search () {
      this.currentPage = 1
      this.initRub()
    },
    // 清空条件
    clearCondition () {
      this.rubName = ''
      this.rubType = ''
    },
    // 查看题目
    watchRub (row) {
      this.dialogFormVisible1 = true
      this.rub = row
      this.$axios.post(`/api/DHRubricController/watchRub/${row.rubId}`).then(({data}) => {
        this.options = data
      })
    },
    // 删除的方法
    delRub (rubId) {
      this.$confirm('此操作将删除该题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.post(`/api/DHRubricController/delRub?rubId=${rubId}&rubState=1`).then(result => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.initRub()
        })
      }).catch(() => {
        this.$message('已取消删除')
      })
    },
    // 提交添加的方法
    submitAdd () {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          if (this.propoContent === '') {
            this.$message.error('请填写健康建议')
          } else {
            this.$confirm('确认提交吗, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              let arr = []
              this.rubricOptions.forEach((e, i) => {
                if (this.count > i) {
                  arr[i] = e
                }
              })
              this.addRub.options = arr
              this.addRub.propose.propoContent = this.propoContent
              this.$axios.post(`/api/DHRubricController/addRub`, this.addRub).then(result => {
                this.dialogFormVisible = false
                this.addRub = {propose: {}}
                this.propoContent = ''
                this.count = 0
                this.rubricOptions = [{rubOpName: '', rubOpScore: 0}, {rubOpName: '', rubOpScore: 0}, {rubOpName: '', rubOpScore: 0}, {rubOpName: '', rubOpScore: 0}, {rubOpName: '', rubOpScore: 0}]
                this.$message({
                  type: 'success',
                  message: '添加成功!'
                })
                this.initRub()
              })
            }).catch(() => {
              this.$message('已取消提交')
            })
          }
        } else {
          return false
        }
      })
    },
    // 点击编辑
    editRub (row) {
      this.$axios.post(`/api/DHRubricController/queryByIdRubric?rubId=${row.rubId}`).then(({data}) => {
        if (data.propose == null || data.propose === '' || data.propose === 'null') {
          data.propose = {propoContent: ''}
        }
        this.upRub = data
        this.count = this.upRub.options.length
        this.upRub.options.forEach((e, i) => {
          this.rubricOptions[i].rubOpName = e.rubOpName
          this.rubricOptions[i].rubOpScore = e.rubOpScore
        })
        this.dialogFormVisibleUp = true
      })
    },
    // 修改的方法
    submitUp () {
      this.$refs['ruleFormUp'].validate((valid) => {
        if (valid) {
          this.$confirm('确认提交修改吗, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            let arr = []
            this.rubricOptions.forEach((e, i) => {
              if (this.count > i) {
                arr[i] = e
              }
            })
            this.upRub.options = arr
            this.$axios.put(`/api/DHRubricController/upRub`, this.upRub).then(result => {
              this.dialogFormVisibleUp = false
              this.upRub = {propose: {}}
              this.count = 0
              this.rubricOptions = [{rubOpName: '', rubOpScore: 0}, {rubOpName: '', rubOpScore: 0}, {rubOpName: '', rubOpScore: 0}, {rubOpName: '', rubOpScore: 0}, {rubOpName: '', rubOpScore: 0}]
              this.$message({
                type: 'success',
                message: '修改成功!'
              })
              this.initRub()
            })
          }).catch(() => {
            this.$message('已取消提交')
          })
        } else {
          return false
        }
      })
    },
    // 关闭修改对话框
    handleClose (done) {
      this.upRub = {propose: {}}
      this.count = 0
      this.rubricOptions = [{rubOpName: '', rubOpScore: 0}, {rubOpName: '', rubOpScore: 0}, {rubOpName: '', rubOpScore: 0}, {rubOpName: '', rubOpScore: 0}, {rubOpName: '', rubOpScore: 0}]
      this.dialogFormVisibleUp = false
    }
  },
  created () {
    this.initRub()
  }
}
</script>
<style>
</style>
